<%--
  Created by IntelliJ IDEA.
  User: RuoLi
  Date: 2023/1/6
  Time: 17:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>admin主页</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/index.css">
    <!-- import Vue before Element -->
    <script src="<%=request.getContextPath()%>/js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="<%=request.getContextPath()%>/js/element-ui.js"></script>
    <!-- axios -->
    <script src="<%=request.getContextPath()%>/js/axios.js"></script>
    <%--icon--%>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/fonts/element-icons.ttf">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/fonts/element-icons.woff">
</head>
<body>
<div id="app">
    <div>
        <el-row :gutter="20">
            <el-col :span="6">
                <div>
                    <el-statistic :value="topicTotal" :title="TopicTotalName"></el-statistic>
                </div>
            </el-col>
            <el-col :span="6">
                <div>
                    <el-statistic :value="registerPerson" :title="RegisterPersonName"></el-statistic>
                </div>
            </el-col>
            <el-col :span="6">
                <div>
                    <% ServletContext servletContext= session.getServletContext();%>
                    <el-statistic :value="onlinePerson" :title="OnlinePersonName">
                        <template slot="prefix">
                            <i class="el-icon-s-flag" style="color: red"></i>
                        </template>
                        <template slot="suffix">
                            <i class="el-icon-s-flag" style="color: red"></i>
                        </template>
                    </el-statistic>
                </div>
            </el-col>
            <el-col :span="6">
                <div>
                    <el-statistic :value="TopicAccuracyRate" :title="TopicAccuracyRateName"></el-statistic>
                </div>
            </el-col>
        </el-row>
    </div>

</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                RegisterPersonName: "注册人数",
                registerPerson: 0,
                TopicTotalName: "题库数量",
                topicTotal: 10,
                OnlinePersonName: '在线人数',
                onlinePerson: <%=servletContext.getAttribute("onlinePerson")%>,
                TopicAccuracyRateName:"题库正确率",
                TopicAccuracyRate:0,
            };
        },
    })
</script>
<style lang="scss">
    .like {
        cursor: pointer;
        font-size: 25px;
        display: inline-block;
    }
</style>
</html>
